<template lang="pug">
.cp-order-place
  el-dialog(:title="title", :visible="visible", @close="close", :close-on-click-modal="false")
    el-form.oc-form(:inline="true", label-width="80px")
      el-form-item.oc-line.oc-top-line(label="采购单号 : ")
        span {{ order }}
      el-form-item.oc-line(label="供应商 : ")
        span {{ supply | compare-list(supplySelect) }}
      el-form-item.oc-line(label="下单日期")
        el-date-picker(v-model="orderTime", type="date", style="width: 240px", placeholder="选择日期", :clearable="false")
    .ot-btns
      el-button.dia-btn(type="primary", plain, @click="close") 取消
      el-button.dia-btn.dia-after(type="primary", @click="placeOrder") 确定
</template>

<script>
import { mapGetters } from 'vuex';
import validate from '@/utils/validate';

const { isEmpty } = validate;

export default {
  name: 'orderplace',
  props: {
    title: {
      type: String,
      default: '采购下单'
    },
    visible: Boolean,
    supply: String,
    order: String
  },
  data() {
    return {
      orderTime: null
    };
  },
  methods: {
    close () {
      this.$emit('close');
    },
    placeOrder () {
      if (isEmpty(this.orderTime)) {
        this.$message.error('下单日期不能为空');
        return;
      }
      const params = {
        order: this.order,
        supply: this.supply,
        orderTime: this.orderTime
      };
      this.$emit('place', params);
    }
  },
  computed: {
    ...mapGetters(['supplySelect'])
  }
};
</script>

<style lang="sass">
.cp-order-place
  .ot-form
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__content
      width: calc(100% - 72px)
    .el-form-item__label
      text-align: left
    .el-select
      width: 100%
  .el-form-item.oc-line
    text-align: center
    display: block
  .el-form-item.oc-top-line
    margin-bottom: 0px
  .ot-btns
    text-align: center
    .dia-btn
      margin-top: 12px
      margin-bottom: 12px
      width: 80px
    .dia-after
      margin-left: 40px
</style>
